<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 300px;
            height: 100px;
            background-color: #FFA500;
            text-align: center;
            line-height: 100px;
        }

        .c1{
            display: none;
        }
    </style>
</head>
<body>
<!--
  window对象
    1. 属性   innerWidth    innerHeight
    2. 方法
    3. 事件  onload

-->
<script>

    window.onload = function () {
        var btn = document.querySelector('button');
        btn.onclick = function () {
            console.log("单击事件")
        }
    }

    var d = document.getElementsByTagName('div');
    //  监听窗口尺寸的改变
    window.onresize = function () {
        console.log("窗口尺寸改变了")
        console.log("窗口的宽度是 = " + window.innerWidth)
        console.log("窗口的高度是 = " + window.innerHeight)

        if (window.innerWidth < 500){
            d[0].classList.add('c1')
        }else {
            d[0].classList.remove('c1')
        }
    }

</script>
<button>单击</button>
<br>
<br>
<div>
    窗口宽度小于500时隐藏该区域
</div>

</body>
</html>